<template>
    <div class="white-box">
        <div>
            <el-button
                v-hasPermi="['enttp:programsMenu:add']"
                class="table-mb"
                type="primary"
                @click="onClickAdd"
                >添加菜单</el-button
            >
            <el-button
                v-hasPermi="['enttp:programsMenu:del']"
                class="table-mb"
                @click="onClickDel()"
                >批量删除菜单</el-button
            >
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            row-key="sid"
            :header-cell-style="{
                background: '#F5F7FA',
                textAlign: 'center',
            }"
            :cell-style="
                ({ column }) => {
                    return {
                        textAlign:
                            column.className === 'operation-nav'
                                ? 'left'
                                : 'center',
                        paddingLeft:
                            column.className === 'operation-nav' ? '25px' : '0',
                    };
                }
            "
            border
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @selection-change="selectionChange"
            @sort-change="sortChange"
        >
            <el-table-column
                type="selection"
                width="55"
                v-hasPermi="['enttp:programsMenu:del']"
                :selectable="(row) => row.deletable === 0"
            />
            <el-table-column
                prop="menuName"
                label="菜单名称"
                min-width="200"
                fixed="left"
                class-name="!text-left"
                :show-overflow-tooltip="{
                    'popper-class': 'max-w-800',
                }"
            ></el-table-column>
            <el-table-column label="图标" min-width="100">
                <template #default="{ row }">
                    <el-icon v-if="row.icon" size="30">
                        <component :is="row.icon" />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column
                prop="viewSort"
                label="排序"
                min-width="80"
            ></el-table-column>
            <el-table-column
                prop="permission"
                label="权限标识"
                min-width="160"
                :show-overflow-tooltip="{
                    'popper-class': 'max-w-800',
                }"
            ></el-table-column>
            <el-table-column
                prop="path"
                label="路由地址"
                min-width="160"
                :show-overflow-tooltip="{
                    'popper-class': 'max-w-800',
                }"
            ></el-table-column>
            <el-table-column label="菜单类型" min-width="100">
                <template #default="{ row }">
                    <el-tag
                        :type="['primary', 'success', 'warning'][row.type / 10]"
                        >{{
                            dictStore.getDictMemberName("menu_type", row.type)
                        }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="100">
                <template #default="{ row }">
                    {{ dictStore.getDictMemberName("data_status", row.status) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="created"
                label="创建时间"
                min-width="160"
            ></el-table-column>
            <el-table-column
                label="操作"
                width="200"
                class-name="operation-nav"
                fixed="right"
            >
                <template #default="{ row }">
                    <MoreBtn
                        :buttons="[
                            {
                                props: {
                                    onClick: () => onClickEdit(row.sid),
                                    'v-hasPermi': ['enttp:programsMenu:edit'],
                                },
                                text: '修改',
                            },
                            {
                                props: {
                                    onClick: () => onClickDel(row.sid),
                                    'v-hasPermi': ['enttp:programsMenu:del'],
                                },
                                text: '删除',
                                isRender: row.deletable === 0,
                            },
                        ]"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { inject, reactive, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import OneLoad from "@mixins/one-load";
import MoreBtn from "@/components/MoreBtn.vue";
import { ElMessageBox } from "element-plus";
import { getMiniMenusTree, delMiniMenus } from "@/apis/system/menu";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("data_status");
dictStore.getDictMembers("menu_type");

const $message = inject("$message");
const router = useRouter();

const state = reactive({
    ascended: false,
    status: null,
    menuName: null,
    sortFieldName: null,
    sidList: [],
});

onActivated(() => {
    pubParams(getList);
});

/**
 * minxin列表加载
 */
const { loading, arr_data, pubRefreshParams, getdata, pubParams, openPaging } =
    OneLoad();

openPaging(getList);

function getList() {
    getdata(getMiniMenusTree());
}

/**
 * 搜索
 * @param {Function} handleSearch 搜索
 */

const handleSearch = () => {
    pubRefreshParams(getList);
};

/**
 * 点击添加小程序菜单
 * @param {Function} onClickAdd 跳转到新增页
 */
const onClickAdd = () => {
    router.push({ name: "MiniProgramAdd" });
};

/**
 * 排序
 * @param {Function} sortChange 排序
 */
const sortChange = (e) => {
    const { property, order } = e.column;
    state.ascended = order === "ascending";
    state.sortFieldName = order ? property : null;
    pubRefreshParams(getList);
};

/**
 * 点击修改按钮
 * @param {Function} onClickEdit 跳转修改页
 */
const onClickEdit = (sid) => {
    sid &&
        router.push({
            name: "MiniProgramEdit",
            query: {
                sid,
            },
        });
};

/**
 * 点击删除按钮
 * @param {Function} onClickDel 删除小程序菜单
 */
const selectionChange = (e) => {
    state.sidList = e.map((item) => item.sid);
};
const onClickDel = async (sid) => {
    if (sid) {
        state.sidList = [sid];
    }
    if (!state.sidList.length) {
        return $message({ message: "请先勾选要删除的数据", type: "warning" });
    }
    await ElMessageBox.confirm("确定删除小程序菜单吗？");
    const res = await delMiniMenus({ sidList: state.sidList });
    if (res.data.code == 200) {
        $message({ message: "删除成功", type: "success" });
        pubParams(getList);
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};
</script>

<style lang="less" scoped></style>
